/** 
 * 工具函数、混入
 */

// 单行文本截断
@mixin text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/**
 * 混入：多行文本截断
 * $line 行数
 * $lh 行高
 */
@mixin multi-line-eclipse($line: 2, $lh: 1.5) {
  $h: #{$lh * $line}em;

  height: $h;
  overflow: hidden;
  line-height: 1.5;

  &::before {
    float: left;
    width: 5px;
    height: $h;
    content: '';
  }

  &::after {
    position: relative; // 移动省略号位置
    top: -#{$lh}em;
    left: 100%;
    float: right;
    width: 2em; // 为三个省略号的宽度
    margin-left: -2em; // 使盒子不占位置
    padding-right: 5px;
    text-align: center;
    background-image: linear-gradient(-90deg, #fff 70%, transparent 100%);
    content: '...';
  }

  .content {
    float: right;
    width: 100%;
    margin-left: -5px;
    word-break: break-all;
  }
}

// 图片加载中背景动画
@mixin imgLoadingAnimation($image) {
  &[lazy='loading'] {
    background-image: $image;
    background-position-x: 50%;
    background-size: 200% 100%;
    animation: fa-loading-animation 1.2s infinite ease-in-out;
  }
}

// 设置复选框颜色
@mixin setCheckboxColor($color) {
  .el-checkbox {
    &__input {
      &.is-checked,
      &.is-indeterminate {
        .el-checkbox__inner {
          background: $color;
          border-color: $color;
        }
      }

      &.is-focus .el-checkbox__inner {
        border-color: $color;
      }
    }

    &__inner {
      &:hover {
        border-color: $color;
      }
    }
  }
}

// 浅色按钮
.fa-btn-light {
  color: $color-text-regular;
  text-decoration: none;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  user-select: none;

  &:hover,
  &.is-active {
    color: $color-primary;
  }

  &:active {
    color: $color-primary;
    background: $background-color-secondary;
  }

  &.is-disabled {
    color: #9da0a3;
    cursor: not-allowed;

    &:active {
      background: #fff;
    }
  }
}
